:host {
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;

  //background-color: aliceblue;
}

.seal {
  width: 300px;
  height: 300px;
  background-color: rgba(211, 211, 211, 0.3);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 5px;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .orient {
    border: 1px solid red;
    font-size: 60px;

    &.out {
      &.w {
        transform: translateY(-50px);
      }

      &.a {
        transform: translateX(-50px);
      }

      &.s {
        transform: translateY(50px);
      }

      &.d {
        transform: translateX(50px);
      }
    }
  }
}
